<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>主干管道定位采集GPS小工具:</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            height: 100%;
        }

        .info {
            width: 26rem;
        }
    </style>

<body>
    <div id='container'></div>
    <div class="info">
        <label id='status'></label>
        <button onclick="GetGPS()" style="width:25%;height:25px;background-color:#f2f7f7">刷新定位</button>
        <button onclick="SaveData()" style="width:25%;height:25px;background-color:#f2f7f7">保存定位</button>
        <hr>
        <p id='result'></p>
        <hr>


        <label id="dt" style="display: none;"></label>
        <label id="jd" style="display: none;"></label>
        <label id="wd" style="display: none;"></label>
        <input id="txt" width="100" style="width:100%;height:25px" placeholder="请先在此输入井号" />

        <hr>
         <div  id="tb1" style="overflow-x: auto; overflow-y: auto; height: 300px; ">
        <table id="tb" border="1" style="width:98%;">
            <tr>
                <th>时间</th>
                <th>经度</th>
                <th>纬度</th>
                <th>井号</th>
                <th>操作</th>
            </tr>
            <tr></tr>
        </table>
  </div>

        <button onclick="clearData()" style="width:25%;height:25px;background-color:#f2f7f7">清空数据</button>
        <button onclick="SaveTxt()" style="width:25%;height:25px;background-color:#f2f7f7">复制数据</button>
        <button onclick="display()" style="width:25%;height:25px;background-color:#f2f7f7">折叠操作</button>
        <label id="lb" style="display: block;"></label>
    </div>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=7deb630ce790e69e9396a9fc7d9bc546"></script>
    <script type="text/javascript">
GetGPS() ;
        function display() {
            var ui = document.getElementById("tb1");
            if (ui.style.display == "none") {
                ui.style.display = "block";   /*****可见****/
            }
            else {
                ui.style.display = "none";    /*****不可见****/
            }
        }



        function SaveData() {

            var lat = document.getElementById("wd").innerHTML; //纬度
            var lag = document.getElementById("jd").innerHTML; //经度//data.formattedAddress
            // var lag = data.formattedAddress
            //var d = new Date();
            //var t = d.toLocaleString();
            // var lat =  1; //纬度
            //var lag = 2; //经度//data.formattedAddress
            var date = new Date();
            var year = date.getFullYear(); //获取当前年份
            var month = date.getMonth() + 1; //获取当前月份
            var dat = date.getDate(); //获取当前日
            var day = date.getDay(); //获取当前星期几
            var hour = date.getHours(); //获取小时
            var minutes = date.getMinutes(); //获取分钟
            var second = date.getSeconds(); //获取秒
            var timer = document.getElementById('timer');
            var t = year + '-' + month + '-' + dat + ' ' + hour + ':' + minutes + ':' + second;
            document.getElementById("dt").innerHTML = "上次保存" + t;
            //document.getElementById("jd").innerHTML = lat;
            // document.getElementById("wd").innerHTML = lag;
            var txt = document.getElementById("txt").value;
            var currentRows = document.getElementById("tb").rows.length;
            var insertTr = document.getElementById("tb").insertRow(1);
            insertTr.innerHTML = "<td>" + t + "</td><td>" + lat + "</td><td>" + lag + "</td><td>" + txt + "</td><td><button onclick='deleteTr(this)'>删除</button></td>";
        }
        function GetGPS() {
            var map = new AMap.Map('container', { resizeEnable: true });
            AMap.plugin('AMap.Geolocation', function () {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：5s
                    position: 'RB',    //定位按钮的停靠位置
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                });

                map.addControl(geolocation);

                geolocation.getCurrentPosition(function (status, result) {
                    if (status == 'complete') {
                        onComplete(result)
                    } else {
                        onError(result)
                    }
                });
            });



        }
        //解析定位结果
        function onComplete(data) {
            document.getElementById('status').innerHTML = '定位成功'
            var str = [];
            str.push('定位结果：' + data.position.getLng() + ',' + data.position.getLat());
            document.getElementById("jd").innerHTML = data.position.getLng();
            document.getElementById("wd").innerHTML = data.position.getLat();
            str.push('定位类别：' + data.location_type);
            if (data.accuracy) {
                str.push('精度：' + data.accuracy + ' 米');
            }//如为IP精确定位结果则没有精度信息
            str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
            document.getElementById('result').innerHTML = str.join('<br>');

        }
        //解析定位错误信息
        function onError(data) {
            document.getElementById('status').innerHTML = '定位失败'
            document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
        }

        function clearData() {
            var lb = document.getElementById("lb");
            lb.innerHTML = "";
            var tb = document.getElementById("tb");
            var tt = tb.childNodes[1];
            var currentRows = tt.childNodes.length;
            for (var i = 1; i < currentRows; i++) {
                tt.removeChild(tt.childNodes[1]);
            }
            lb.innerHTML = "已清空";
        }

        function SaveTxt() {

            var lb = document.getElementById("lb");
            lb.innerHTML = "";
            var s = "";
            var tb = document.getElementById("tb");    // table 的 id
            var rows = tb.rows;                           // 获取表格所有行
            for (var i = 0; i < rows.length; i++) {
                var sr = "";
                for (var j = 0; j < rows[i].cells.length && j < 4; j++) {    // 遍历该行的 td
                    if (j == 3)
                        sr = sr + rows[i].cells[j].innerHTML;
                    else
                        sr = sr + rows[i].cells[j].innerHTML + ";";
                }
                if (sr != "")
                    s = s + sr + "\r\n";
            }
            copytest(s);
            //lb.innerHTML = "已复制";
        }
        function copytest(txt) {
            var input = document.createElement('textarea');
            //input.setAttribute('readonly', 'readonly');
            input.value = txt;
            document.body.appendChild(input);
            input.select();
            input.setSelectionRange(0, 9999);
            document.execCommand('Copy');

            var lb = document.getElementById("lb");
            lb.innerHTML = "";
            if (document.execCommand('Copy')) {
                // 复制成功
                lb.innerHTML = "复制成功";
            }
            else {
                lb.innerHTML = "复制失败";
            }
            document.body.removeChild(input);
        }

        function deleteTr(obj) {
            //通过this找到父级元素节点
            var tr = obj.parentNode.parentNode;
            //找到表格
            var tbody = tr.parentNode;
            //删除行
            tbody.removeChild(tr);
            //只剩行首时删除表格
            if (tbody.rows.length == 1) {
                tbody.parentNode.removeChild(tbody);
            }
        }








    </script>
</body>

</html>